<template>
  <div class="content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.payer_name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="formInline.payer_phone" placeholder="请输入手机号码" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="proxy.$refs.FileUploaderCom.open()" plain :loading="loading">上传Excel模板</el-button>
        <el-button type="primary" @click="toDownload" plain :loading="loading">下载Excel模板</el-button>
        <el-button type="primary" @click="proxy.$refs.inputFile.click()" plain :loading="loading">导入Excel</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableParams.rows" stripe>
      <el-table-column type="index" />
      <el-table-column prop="status_format" label="支付状态" />
      <el-table-column prop="submit_answer_time_format" label="提交答卷时间" min-width="150" />
      <el-table-column prop="source_details" label="商户订单号" min-width="250" />
      <el-table-column prop="payer_name" label="姓名" min-width="150" />
      <el-table-column prop="payer_phone" label="手机号码" min-width="150" />
      <el-table-column prop="payer_idCard" label="身份证号" min-width="200" />
      <el-table-column prop="payer_email" label="电子邮箱" min-width="250" />
      <el-table-column prop="payer_educational" label="最高学历" min-width="200" />
      <el-table-column prop="payer_major" label="毕业专业" min-width="150" />
      <el-table-column prop="payer_work_year" label="累计工作年限" min-width="150" />
      <el-table-column prop="payer_enterprise" label="所在企业" min-width="200" />
      <el-table-column prop="payer_enterprise_taxNo" label="所在企业税号" min-width="200" />
      <el-table-column prop="payer_enterprise_area" label="所在企业区属" min-width="150" />
      <el-table-column prop="training_type_1" label="报名的培训分类" min-width="250" />
      <!-- <el-table-column prop="training_type_2" label="报名的《中级职称继续教育专业及地区" min-width="250" />
      <el-table-column prop="training_type_3" label="科目课程" min-width="250" />
      <el-table-column prop="training_type_4" label="科目课程" min-width="250" />
      <el-table-column prop="training_type_5" label="科目课程" min-width="250" />
      <el-table-column prop="occupation_type_1" label="报名的《职业技能等级证书" min-width="250" />
      <el-table-column prop="occupation_type_2" label="报名的职业工种与技能等级" min-width="250" /> -->
      <el-table-column prop="project" label="报名课程" min-width="250" />
    </el-table>

    <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageIndex" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <!-- 导入文件 -->
    <input type="file" @change="handleFileUpload" v-show="false" ref="inputFile">

    <!-- 上传文件 -->
    <FileUploader v-model="fileUrl" ref="FileUploaderCom"></FileUploader>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();

let formInline = ref({
  pageIndex: 1,
  pageSize: 10,
  payer_name: "",
  payer_phone: "",
});
let loading = ref(false);
let tableParams = ref({});
let fileUrl = ref(""); //上传之后的链接
let info = ref({});

onMounted(() => {
  search();
  systemSettingsConfig({}, "details");
});

let search = () => {
  formInline.value.pageIndex = 1;
  getInfo();
};

let init = () => {
  formInline.value = {
    pageIndex: 1,
    pageSize: 10,
    payer_name: "",
    payer_phone: "",
  };
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.questionStar({
    type: "list",
    data: formInline.value,
  });
  console.log("tableParams.value", tableParams.value);
};

async function handleFileUpload(event) {
  try {
    loading.value = true;
    const file = event.target.files[0]; // 获取选择的文件
    let arr = <any>[];
    let resp = await proxy.$utils.fileToJson(file);
    for (let index = 0; index < resp.length; index++) {
      const element = resp[index];
      if (index && element[0] == "已支付" && extractFormat(element[6])) {
        arr.push({
          status_format: element[0], //支付状态
          submit_answer_time: proxy.$utils.getTimeFn(element[1]), // 提交答卷时间戳
          submit_answer_time_format: element[1], //提交答卷时间
          source_details: extractFormat(element[2]), //商户订单号
          payer_name: element[3], //姓名
          payer_phone: element[4], //手机号
          payer_idCard: element[5], //身份证号
          payer_email: element[6], //电子邮箱
          payer_educational: element[7], //最高学历
          payer_major: element[8], //毕业专业
          payer_work_year: element[9], //累计工作年限
          payer_enterprise: element[10], //所在企业
          payer_enterprise_taxNo: element[11], //所在企业税号
          payer_enterprise_area: element[12], //所在企业区属
          training_type_1: element[13], //报名的培训分类
          // training_type_2: element[19],
          // training_type_3: element[20],
          // training_type_4: element[21],
          // training_type_5: element[22],
          // occupation_type_1: element[28],
          // occupation_type_2: element[29],
          project: element[14], //报名课程
        });
      }
    }
    await proxy.$apis.questionStar({
      type: "upload",
      data: arr,
    });
    proxy.$utils.showToast("导入成功");
    search();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

//截取字符串里面 商户订单号
function extractFormat(str) {
  const regex = /[0-9_]+/g;
  const matches = str.match(regex);
  return matches ? matches.join("") : null;
}

let systemSettingsConfig = async (data, type) => {
  if (type == "details") {
    info.value = await proxy.$apis.systemConfig({
      type,
      data: data,
    });
  } else if (type == "update") {
    data.oldDownUrl = info.value.questionnaireStarDownTemplateUrl;
    await proxy.$apis.systemConfig({
      type,
      data: data,
    });
    await systemSettingsConfig({}, "details");
    proxy.$utils.showToast("模板更新成功");
    fileUrl.value = "";
  }
};

let toDownload = () => {
  window.location.href = info.value.questionnaireStarDownTemplateUrl;
};

watch(
  () => fileUrl.value,
  (newValue, oldValue) => {
    if (newValue)
      systemSettingsConfig(
        { questionnaireStarDownTemplateUrl: newValue },
        "update"
      );
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
